<template>
  <div class="app-container">
    <!--设备操作记录表-->
    <div class="clearfix">
      <!--工具栏-->
      <div class="toolbar" style="float:left;">
        <el-form :inline="true" :model="filters" :size="size" @submit.native.prevent>
          <el-form-item>
            <el-input v-model="filters.name" placeholder="设备名称" />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              label="搜索"
              perms="sys:role:view"
              type="primary"
              @click="findPage(null)"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="toolbar" style="float:right">
        <el-form :inline="true" :size="size">
          <el-form-item>
            <el-button-group>
              <el-tooltip content="刷新" placement="top">
                <el-button icon="fa fa-refresh" @click="findPage(null)" />
              </el-tooltip>
              <!-- <el-tooltip content="导出" placement="top">
            <el-button icon="fa fa-file-excel-o"></el-button>
          </el-tooltip> -->
            </el-button-group>
          </el-form-item>
        </el-form>

      </div>
    </div>

    <!--表格内容栏-->
    <kt-table
      :show-operation="false"
      :data="pageResult"
      :columns="filterColumns"
      @findPage="findPage"
    >
      <!--      <template v-slot:ctrlButton="{data,index}">
        // 作用于插槽 操作按钮
        <kt-button
          icon="fa fa-plus"
          label="添加"
          perms="sys:user:add"
          type="primary"
          @click="handleAdd"
        />
      </template>-->
    </kt-table>
  </div>
</template>

<script>
import KtButton from '@/coreComponents/Core/KtButton'
import KtTable from '@/coreComponents/Core/KtTable'
import formMixin from '@/mixins/formMixin'
import { DeviceEnum } from '@/utils/constant'

export default {
  name: 'DeviceOperation',
  components: {
    'kt-table': KtTable,
    'kt-button': KtButton
  },
  mixins: [formMixin],
  data() {
    return {
      size: 'small',
      filters: {
        name: ''
      },
      columns: [],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {}

    }
  },
  computed: {

  },
  mounted() {
    this.initColumns()
  },
  methods: {
    initColumns: function() {
      this.columns = [
        // { prop: 'id', label: 'ID', minWidth: 100 },
        { prop: 'VequipmenId', label: '设备名称', minWidth: 100 },
        { prop: 'Vtype', label: '设备类型', minWidth: 120 },
        { prop: 'description', label: '描述', minWidth: 100 },
        { prop: 'VoptBy', label: '操作人员', minWidth: 100 },
        { prop: 'optTime', label: '操作时间', minWidth: 180 },
        { prop: 'createTime', label: '创建时间', minWidth: 180 },
        { prop: 'updateTime', label: '修改时间', minWidth: 180 }
      ]
      this.filterColumns = this.columns
    },
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.pageRequest = data.pageRequest
      }
      this.pageRequest.columnFilters = { name: { name: 'name', value: this.filters.name }}

      this.$api.systemBase.getDeviceOperaction(this.pageRequest).then((res) => {
        this.pageResult = res.data
        this.pageResult.content.map(item => {
          item.createTime = this.formatterDate(item.createTime)
          item.updateTime = this.formatterDate(item.updateTime)
          item.Vtype = DeviceEnum.getEnumName(item.type)
          return item
        })
      }).then(data != null ? data.callback : '')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
